// 获取播放状态
import { useStore } from 'vuex'
import { computed, ref, watch } from 'vue'
export default function useCd() {
  const cdRef = ref(null)
  const cdImageRef = ref(null)

  const store = useStore()
  const playing = computed(() => store.state.playing)
  const isClass = computed(() => {
    return playing.value ? 'playing' : ''
  })

  watch(playing, (newPlaying) => {
    if (!playing.value) {
      syncTransfrom(cdRef.value, cdImageRef.value)
    }
  })

  function syncTransfrom(cdRef, cdImageRef) {
    const wrapperTransfrom = getComputedStyle(cdRef).transform
    const innerTransfrom = getComputedStyle(cdImageRef).transform
    cdRef.style.transform = wrapperTransfrom === 'none' ? innerTransfrom : innerTransfrom.concat(' ', wrapperTransfrom)
  }
  return {
    isClass,
    cdRef,
    cdImageRef
  }
}
